<template>
    <el-dialog class="model_template_dialog" title="模板编辑" width="80%" :visible="visible"
               append-to-body :close-on-press-escape="false" :close-on-click-modal="false"
               @close="handleClose" @closed="$emit('input', false)">

        <monaco-editor v-model="template" lang="text"></monaco-editor>

        <div slot="footer">
            <el-button :loading="saveLoading" @click="handleClose">取 消</el-button>
            <el-button type="success" :loading="saveLoading" @click="saveClick">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script type="text/ecmascript-6">
  import MonacoEditor from "../../components/editor/MonacoEditor/index";
  import { local } from "../../utils/js/storage";

  /**
   * @author 白雨浓
   * @date 2019/7/7 16:47
   *
   * 模型模板编辑
   **/
  export default {
    name: 'ModelTemplateDialog',
    components: {MonacoEditor},
    props: ['value', 'type', 'defaultTemplate', 'cacheKey'],
    data() {
      return {
        visible: this.value,
        saveLoading: false,
        template: this.defaultTemplate,
      }
    },
    created() {
      const template = local.getItem(this.cacheKey);

      if (template) {
        this.template = template;
      }
    },
    mounted() {
    },
    methods: {
      async saveClick() {
        local.setItem(this.cacheKey, this.template);
        this.handleClose();
      },
      handleClose() {
        this.visible = false;
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .model_template_dialog {
    }
</style>
